import '../../styles/modules/card.css'
import {Stack} from "../../model/Stack.ts";
import {baseUrl} from "../../settings/Settings.ts";
import * as bootstrap from "bootstrap";
import useModalState from "../../settings/GlobalStates.ts";


const LibraryCard = (props: { stack: Stack, isLoggedIn: boolean }) => {



    const {stack, isLoggedIn} = props

    //Toast trigger on save
    const toastLiveExample = document.getElementById('liveToast');

    const triggerToast = () => {
        const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
        toastBootstrap.show();
    };

    const { setStackId } = useModalState();



    const handleClick = () => {
        if (isLoggedIn) {
            setStackId(stack.stackId)
            //
        } else {
            setStackId(stack.stackId)
            triggerToast()
        }


    }
    return (
        <div className="col mt-3">
            <div className="card" >
                <div style={{display: 'none'}} className="item-id">{String(stack.stackId)}</div>
                <img className="bd-placeholder-img card-img-top image-holder crop-image" id={"image-library-card"} src={baseUrl + stack.imgUrl} alt=""
                     width="100%" />
                <div className="card-body">
                    <p className="card-text mb-0">{stack.title}</p>
                    <p className="text-secondary p-0 mt-1">{stack.description}</p>
                    <div className="d-flex justify-content-between align-items-center">
                        <div className="btn-group">
                            <button type="button"
                                    className="btn btn-sm btn-outline-secondary rounded-start-4 btn-view">View
                            </button>
                            <button type="button"
                                    data-bs-toggle="modal" data-bs-target="#exampleModal"
                                    className="btn btn-sm btn-outline-secondary rounded-end-4 btn-purchase"
                                    value={String(stack.itemId)}

                                    onClick={handleClick}
                            >Borrow
                            </button>
                        </div>
                        <span className="badge rounded-pill p-2">
              <span>{stack.quantity}</span>
            </span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default LibraryCard